<template>
  <div class="pagination">
    <n-pagination
      :item-count="total"
      v-model:page="page"
      v-model:page-size="pageSize"
      show-size-picker
      :page-sizes="pageSizes"
    />
  </div>
</template>

<script lang="ts" setup>
  withDefaults(
    defineProps<{
      total: number
      pageSizes?: number[]
    }>(),
    {
      pageSizes: () => [10, 20, 30, 40]
    }
  )

  const emits = defineEmits(['upadtePage', 'upadtePageSize'])

  const page = defineModel('pageNum', { default: 1 })
  const pageSize = defineModel('pageSize', { default: 20 })
</script>

<style scoped lang="scss">
  .pagination {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    background-color: var(--n-color);
    border-radius: 0 0 4px 4px;
  }
</style>
